<template>
  <div class="box">
    <ul class="xuanze">
      <li style="margin-left: 0"><a href="">HipHop</a></li>
     <li><a href="" style=" margin-left: 0.28rem"><router-link to="/Vip" tag='span' active-class='active1'>精选</router-link></a></li>
       <li><a href=""><router-link to="/Fls" active-class='active' tag='span'>福利社</router-link></a></li>
      <li><a href="">5折</a></li>
      <li><a href=""><router-link  to="/Zx" active-class='active' tag='span'>帧享</router-link></a></li>
      <li><a href=""><router-link to="/Dy" active-class='active' tag='span'>电影</router-link></a></li>
      <li><a href=""><router-link to="/Bf">电视剧</router-link></a></li>
      <li><a href="">综艺</a></li>
      <li><a href="">动漫</a></li>
      <li><a href="">点播剧场</a></li>
      <li><a href="">漫画</a></li>
      <li><a href="">纪录片</a></li>
      <li><a href="">少儿</a></li>
      <li><a href="">体育</a></li>
      <li><a href="">新知</a></li>
      <li>文化</li>
    </ul>
	<span class="iconfont public-search"></span>
	
  </div>
</template>

<script>
export default {

  name: "Search1",
};
</script>
<style scoped>
@import url("../../../assets/iconfont/iconfont.css");
.box {
  width: 100%;
  height: 0.4rem;
  background-color: white;
  position: relative;
}
.iconfont{
	font-size: 0.22rem;
	color: black;
	position: absolute;
	right: 0.3rem;
	top: 0.08rem;
}

.xuanze {
  width: 3.27rem;
  height: 0.4rem;
  display: flex;
  text-align: center;
  overflow: auto;
  white-space: nowrap;
  margin-left: 0.25rem;
}

.xuanze li {
  height: 100%;
  margin: 0.12rem 0;
  margin-left: 0.19rem;
  font-family: 宋体;
  flex-shrink: 0;
}

.xuanze::-webkit-scrollbar {
  display: none;
}

.xuanze li a{
  font-size: 0.16rem;
  display: block;
  color: #b0adaf;
  
}
.active{
  color: #c09a4b;
  /* font-size: 0.2rem; */
}
.active1{
  color: #ffecb1;
}
</style>